<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详细信息</title>
    <link rel="stylesheet" href="../css/details.css">
</head>

<body>
    <header>
        <nav>
            <div class="backBox">
                <a href="../pages/index.html">Back</a>
            </div>
            <div class="titleBox">
                产品详细
            </div>
            <div class="collBox">
                <i class="iconfont icon-shoucangjia"></i>
            </div>
        </nav>
        <div class="imgBox">
            <img src="../image/details/主图.png" alt="">
        </div>
    </header>
    <main>
        <!-- 价格 -->
        <div class="price">
            ￥32
            <button>购买</button>
        </div>
        <!-- 好评度 -->
        <div class="evaluate">
            <i class="iconfont icon-shoucangjia"></i>
            好评度
            <span>99%</span>
            <span>共605个评价&gt;</span>
        </div>
        <!-- 适用商户 -->
        <div class="apply">
            适用商户
            <span>&gt;</span>
        </div>
        <!-- 店铺区 -->
        <div class="cont">
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/details/正佳.png" alt="">
                    <p>正佳店</p>
                </div>
                <div class="infoBox">
                    <p>万岁寿司（正佳店）</p>
                    <p>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <span>10分</span>
                    </p>
                    <p>离你100m</p>
                    <p>查看详情 &gt;&gt;</p>
                    <button>进入</button>
                </div>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/details/体育西.png" alt="">
                    <p>体育西店</p>
                </div>
                <div class="infoBox">
                    <p>万岁寿司（体育西店）</p>
                    <p>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <span>10分</span>
                    </p>
                    <p>离你100m</p>
                    <p>查看详情 &gt;&gt;</p>
                    <button>进入</button>
                </div>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/details/昌岗.png" alt="">
                    <p>昌岗店</p>
                </div>
                <div class="infoBox">
                    <p>万岁寿司（昌岗店）</p>
                    <p>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <span>10分</span>
                    </p>
                    <p>离你100m</p>
                    <p>查看详情 &gt;&gt;</p>
                    <button>进入</button>
                </div>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/details/正佳.png" alt="">
                    <p>正佳店</p>
                </div>
                <div class="infoBox">
                    <p>万岁寿司（正佳店）</p>
                    <p>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <span>10分</span>
                    </p>
                    <p>离你100m</p>
                    <p>查看详情 &gt;&gt;</p>
                    <button>进入</button>
                </div>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/details/体育西.png" alt="">
                    <p>体育西店</p>
                </div>
                <div class="infoBox">
                    <p>万岁寿司（体育西店）</p>
                    <p>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <span>10分</span>
                    </p>
                    <p>离你100m</p>
                    <p>查看详情 &gt;&gt;</p>
                    <button>进入</button>
                </div>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/details/昌岗.png" alt="">
                    <p>昌岗店</p>
                </div>
                <div class="infoBox">
                    <p>万岁寿司（昌岗店）</p>
                    <p>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <i class="iconfont icon-shoucangjia"></i>
                        <span>10分</span>
                    </p>
                    <p>离你100m</p>
                    <p>查看详情 &gt;&gt;</p>
                    <button>进入</button>
                </div>
            </div>
        </div>
        <!-- 一个高度和footer一样的盒子 -->
        <div class="empty"></div>
    </main>
    <footer>
        <!-- 底部导航栏 -->
        <ul>
            <!-- 首页 -->
            <li>
                <a href="./index.html">
                    <i class="iconfont icon-shouye-xianxing"></i><span>首页</span>
                </a>
            </li>
            <!-- 分类 -->
            <li>
                <a href="./classify.html">
                    <i class="iconfont icon-fenleiorguangchangorqita"></i><span>分类</span>
                </a>
            </li>
            <!-- 发现 -->
            <li>
                <a href="./find.html">
                    <i class="iconfont icon-hanhan-01-01"></i><span>发现</span>
                </a>
            </li>
            <!-- 我的 -->
            <li>
                <a href="./me.html">
                    <i class="iconfont icon-wode"></i><span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>

</html>